<template>
  <div class="cats">
    <div class="nav font42">
      <ul>
        <li v-for="(cat,index) in cats.data" :class="index==listCurNav1Index?'active':''">
          <div>
            <span  @click="updateNav(index)">{{ cat.name }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="linelb4">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="nav2 font42">
      <div class="colorNav" v-if="hasColorNav">
        <div class="imgColor"><img src="" alt=""></div>
        <div class="imgColor"><img src="" alt=""></div>
        <div class="imgColor"><img src="" alt=""></div>
        <div class="imgColor"><img src="" alt=""></div>
        <div class="imgColor"><img src="" alt=""></div>
      </div>
      <div class="nav22">
        <ul :class="hasColorNav?'contNav':''">
          <li v-for="(nav2,index) in sub_cats" :class="index==listCurNav2Index?'bg-active':''" @click="updataList(index)">
          <span>
            {{ nav2.name }}
          </span>
          </li>
        </ul>
      </div>

    </div>
    <div class="goodsList  font30">
      <ul>
        <li v-for="(good,index) in goodsList.list" class="goodItem">
          <div class="media-box">
            <router-link :to="{ path: '/details/'+good.cid, params: { cid: good.cid }}">
              <img :src="good.prop_img" alt="">
            </router-link>
            <div class="title title1">{{ good.title }}</div>
            <div class="title title2">{{ good.title }}</div>
            <div class="box ">
              <span class="price">￥{{ good.price }} </span>
              <span class="count">99人</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import {fetchData} from '../../common/js/ajax.js'
  export default {
    data () {
      return {
        cats: "",
        sub_cats: "",
        goodsList: "",
        hasColorNav: true,
        listCurNav1Index:0,
        listCurNav2Index:0,
        listCurNav3Index:0
      }
    },
    mounted(){
      var _that = this;

      fetchData("static/json/cats.json", "get", function (msg, callback) {
        _that.cats = msg;
        _that.updateNav(0);
      });

      fetchData("static/json/items.json", "get", function (msg) {
        _that.goodsList = msg.data;
      });

    },
    props: {},
    methods: {
      updateNav: function (index) {
        var cats = this.cats;
        this.sub_cats = cats.data[index].sub_cats;
        this.hasColorNav=cats.data[index].hasColorNav;
        this.listCurNav1Index=index;
        this.listCurNav2Index = 0;
      },
      updataList: function (index) {
        this.listCurNav2Index = index;
      }
    }
  }
</script>
<style scoped>
  .cats {
    width: 23rem;
    height: 15.65rem;
    float: left;
  }

  .nav{
    height: 0.42rem;
  }

  .nav li {
    float: left;
    width: 5.75rem;
    margin-left: -0.02rem;
  }

  .linelb4 {
    height: 0.37rem;
    margin: 0.25rem 0 0 0;
  }
  .linelb4 div{
    float: left;
    width: 5.75rem;
    box-sizing: border-box;
    height: 0.37rem;
    border-left:0.04rem solid white;
    border-bottom:0.04rem solid white;
  }


  .contNav {
    float: right;
  }

  .colorNav {
    float: left;
  }

  .nav2 {
    height: 0.9rem;
    margin-top: 0.63rem;
  }

  .nav2 .colorNav .imgColor {
    height: 1rem;
    width: 1rem;
    padding:0;
    box-sizing: content-box;
    margin-right: 0.59rem;
    display: inline-block;
    border: 0.04rem solid white;
  }

  .nav2 li {
    display: inline-block;
    height: 0.9rem;
    padding: 0 0.40rem ;
    box-sizing: border-box;
    line-height: 0.82rem;
    border: 0.04rem solid white;
    margin-right: 0.7rem;
  }

  .goodsList {
    height: 11.9rem;
    margin-top: 1.16rem;
    width: 22.56rem;
    overflow: scroll;
  }

  .goodsList li {
    width: 3.2rem;
    height: 6.4rem;
    position: relative;
    display: inline-block;
    margin-left: 1.64rem;
    /*background-color: red;*/
  }

  .goodsList li:nth-child(5n+1) {
    margin-left: 0;
  }


</style>
